<script setup>
import {reactive, ref, onMounted} from 'vue';
import leftbar from "@/components/leftbar.vue";
import headbar from "@/components/headbar.vue";
import { useRoute } from 'vue-router'
import axios from "axios";
const route = useRoute()
let info = ref({});
onMounted(() => {
    // 在这里执行 DOM 操作
    info = JSON.parse(route.query.inf)
    console.log(info)
    console.log(info.email)
    submissionInfo.value.time = info.submittime
    submissionInfo.value.user = info.submitter
    submissionInfo.value.contactInfo = info.email
    submissionInfo.value.isFirst = info.first
    submissionInfo.value.modelType = info.type
    submissionInfo.value.version = info.version
    submissionInfo.value.key = info.key
    submissionInfo.value.address = info.address
    submissionInfo.value.category = info.category
    mirrorPrimary.value = info.mirror1
    mirrorBackup.value = info.mirror2
    modelDescription.value = info.introduction
    console.log(mirrorPrimary.value)
});

const changePrice = ref(-1);
const inputValue = ref("");
const submissionInfo = ref({
  user: "张三",
  time: "2024-12-25 14:00",
  modelType: "GPT-3.5",
  isFirst: "是",
  version: "v1.0",
  contactInfo: "123-456-7890",
  key: "",
  address: "",
  category: "",
});
const mirrorPrimary = ref("");
const mirrorBackup = ref("");
const uploadedFiles = ref([]);
const modelDescription = ref("");

const chargeDetails = ref([
  {
    method: "按次收费",
    userPrice: "10元/次",
    avgPrice: "12元/次",
    platformResult: "合理",
  },
    {
    method: "按日收费",
    userPrice: "100元/日",
    avgPrice: "120元/日",
    platformResult: "偏低",
  },
    {
    method: "按周收费",
    userPrice: "100元/周",
    avgPrice: "120元/周",
    platformResult: "偏低",
  },
  {
    method: "按月收费",
    userPrice: "100元/月",
    avgPrice: "120元/月",
    platformResult: "偏低",
  },
]);

function handleFileUpload(event) {
  const files = Array.from(event.target.files);
  uploadedFiles.value.push(...files);
}

function changePriceItem() {
  let index = changePrice.value
  console.log(chargeDetails.value[index])
  chargeDetails.value[index].userPrice = inputValue.value
  changePriceCancel()
}

function evaluatePriceItem(index) {

  console.log(parseInt(chargeDetails.value[0].userPrice));
}

function changePriceCancel() {
  inputValue.value = ""
  changePrice.value = -1
}
function handleSubmit() {
    const form = {
      "nameEN": submissionInfo.value.category,
      "modelZH": submissionInfo.value.category,
      "type": submissionInfo.value.modelType,
      "imageURL": mirrorPrimary.value,
      "imageURLBackup": mirrorBackup.value,
      // "modelKey": submissionInfo.value.key,
      "memorySize": 0,
      "docURL": "string",
      "description": modelDescription.value,
      "priceByTimes": parseInt(chargeDetails.value[0].userPrice),
      "priceByDay": parseInt(chargeDetails.value[1].userPrice),
      "priceByWeek": parseInt(chargeDetails.value[2].userPrice),
      "priceByMonth": parseInt(chargeDetails.value[3].userPrice)
    }
    const headers = {
        'Content-Type': 'application/json',
    }
    console.log(form)
    axios.post('/model-provider/model/create-model', form, {headers})
          .then(response => {
              // 请求成功处理
              console.log('Dictionary sent successfully:', response.data);
              alert('字典数据提交成功！');
          })
          .catch(error => {
              // 错误处理
              console.error('Error sending dictionary:', error);
              alert('提交失败，请检查网络或联系管理员！');
          });
    console.log("提交表单");
}

function handleCancel() {
  console.log("取消表单");
}
</script>

<template>
   <headbar />
   <leftbar />
    <div class="price-model">
        <div class="price-model-reporting">
            <div class="mr">模型信息</div>
            <span class="step">
                <span class="white-circle"><span class="circle-font">1</span></span>
                <span class="step-font">模型填报</span>
                <span class="horizontal-line"></span>
                <span class="blue-circle"><span class="circle-font">2</span></span>
                <span class="step-font">模型审核</span>
                <span class="horizontal-line"></span>
                <span class="white-circle"><span class="circle-font">3</span></span>
                <span class="step-font">完成</span>
            </span>
        </div>
        <div class="price-model-information">
          <div class="submission-info1">
              <!-- 第一行 -->
              <div class="row">
                <div class="item">提交用户: {{ submissionInfo.user }}</div>
                <div class="item">提交时间: {{ submissionInfo.time }}</div>
                <div class="item">模型类型: {{ submissionInfo.modelType }}</div>
              </div>
              <!-- 第二行 -->
              <div class="row">
                <div class="item">初次提交: {{ submissionInfo.isFirst }}</div>
                <div class="item">提交版本: {{ submissionInfo.version }}</div>
                <div class="item">联系电话: {{ submissionInfo.contactInfo }}</div>
              </div>
            </div>
            <div class="submission-info2">
                <!-- 左边镜像地址 -->
                <div class="mirror-address">
                  <label for="mirror" class="submission-info2-label">镜像地址</label>
                  <input type="text" id="mirror" placeholder="请输入镜像地址" v-model="mirrorPrimary"/>
                  <input type="text" placeholder="请输入备用镜像地址" v-model="mirrorBackup"/>
                </div>

                <!-- 右边材料文档 -->
                <div class="materials">
                  <label for="upload" class="submission-info2-label">材料文档</label>
                  <div class="upload-container">
                    <div class="upload-box" @click="triggerFileInput">
                      <label for="upload" class="upload-button">点击上传文件
                        <input type="file" id="upload" multiple @change="handleFileUpload" style="display: none" />
                      </label>
                    </div>
                    <div class="uploaded-files">
                      <ul>
                        <li v-for="(file, index) in uploadedFiles" :key="index">{{ file.name }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
            </div>
            <div class="submission-info3">
                <div class="model-description">
                  <label for="description" class="submission-info3-label">模型描述</label>
                  <input type="text" placeholder="请输入模型描述" v-model="modelDescription"/>
                </div>
            </div>
            <div class="charge-details">
              <label class="table-title">收费类别明细</label>
              <table>
                <thead>
                  <tr>
                    <th>收费方式</th>
                    <th>用户定义收费价格</th>
                    <th>同类模型平台平均收费价格</th>
                    <th>平台评估结果</th>
                    <th>操作评估</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in chargeDetails" :key="index">
                    <td>{{ item.method }}</td>
                    <td>{{ item.userPrice }}</td>
                    <td>{{ item.avgPrice }}</td>
                    <td>{{ item.platformResult }}</td>
                    <td>
                      <button @click="changePrice = index">修改价格</button>
                      <button @click="evaluatePriceItem(index)">评估价格</button>
                    </td>
                  </tr>
                </tbody>
              </table>
          </div>
          <div class="action-buttons">
            <button class="submit-button" @click="handleSubmit">提交</button>
            <button class="cancel-button" @click="handleCancel">取消</button>
          </div>
        </div>
    </div>
    <div v-if="changePrice > -1" class="alert change-price">
        <div class="change-price-box">
          <h3>请输入价格</h3>
          <input
            type="text"
            v-model="inputValue"
            placeholder="请输入价格"
            class="input-box"
          />
          <div class="button">
            <button :disabled="!inputValue.trim()" @click="changePriceItem">确定</button>
            <button @click="changePriceCancel">取消</button>
          </div>
        </div>
    </div>
</template>

<style>
button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.price-model {
    position: absolute;
    top: 73px;
    left: 15%;
    width: 85%;
    border: 2px solid gray;
    padding-left: 5px;
}

.price-model-reporting {
    border: 1px solid gray;
    height: 70px;
    width: 100%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    font-size: 25px;
    /* 垂直居中 */
}

.price-model-information {
    border: 1px solid gray;
    margin-top: 10px;
    padding-top: 20px;

}

.model-reporting .mr {
    margin-left: 20px;
    font-size: 25px;
    font-weight: 700;
    color: rgb(108, 106, 106);
}

.step {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    margin-left: 400px;
}

.step .step-font {
    margin-left: 3px;
    margin-right: 3px;
    font-size: 22px;
    color: rgb(106, 105, 105);
}

.blue-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* 这将创建一个圆 */
    background-color: rgb(115, 150, 238);
    /* 设置背景颜色为蓝色 */
    border: 3px solid rgb(115, 150, 238);
    font-size: 25px;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.blue-circle .circle-font {
    color: white;
}

.horizontal-line {
    width: 150px;
    /* 横线宽度 */
    height: 2px;
    /* 横线高度 */
    background-color: rgb(178, 175, 175);
    /* 横线颜色 */
}

.white-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* 这将创建一个圆 */
    background-color: white;
    /* 设置背景颜色为蓝色 */
    border: 3px solid rgb(178, 175, 175);
    font-size: 25px;
    margin-left: 3px;
    margin-right: 3px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.white-circle .circle-font {
    color: rgb(178, 175, 175);
}

/* .ant-form-item .ant-form-item-label >label{
    font-size: 25px;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
    height: 40px;
    width: 400px;
} */

.submission-info1 {
  margin-left: 100px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 确保上下两行右端对齐 */
}

.row {
  margin-top: 20px;
  display: flex;
  justify-content: space-between; /* 平均分布 */
  width: 100%; /* 保证行元素拉伸填满容器 */
}

.item {
  flex: 1; /* 平均分布每个元素 */
  text-align: left; /* 元素内部左对齐 */
  font-size: 20px;
}

.submission-info2 {
  margin-left: 100px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  gap: 30px;
}

.mirror-address,
.materials {
  flex: 1;
}

.submission-info2-label{
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}

.mirror-address input {
  display: block;
  width: 90%;
  height: 30px;
  margin-bottom: 18px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}


.upload-container {
  display: flex;
  border: 2px dashed #ccc;
  border-radius: 10px;
  width: 90%;
  height: 120px;
  overflow: hidden;
}

.upload-box {

  cursor: pointer;
  background-color: #f9f9f9;
  border-right: 1px solid #ddd;
  width: 30%;
}

.upload-box:hover {
  background-color: #007bff;

}

.upload-button {
  display: block;
  background-color: #007bff;
  height: 100%;
  padding: 45px 0;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.upload-button:hover {

  background-color: #0056b3;
}

.uploaded-files {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  margin-left: 5px;
}

.uploaded-files ul {
  list-style-type: circle;
}

.uploaded-files li {
  margin-top: 10px;
  color: #333;
}


.submission-info3 {
  margin-left: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  height: 100px;
}

.submission-info3-label {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}
.model-description {
  font-size: 24px;
  width: 85%;
}

.model-description input {
  height: 100%;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.charge-details {
    margin-left: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 80px;
    height: 100px;
}

.charge-details .table-title {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 20px;
}

.charge-details table {
  width: 85%;
  border-collapse: collapse;
}

.charge-details th, .charge-details td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

.charge-details th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.charge-details button {
  margin: 0 5px;
  padding: 4px 8px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.charge-details button:hover {
  background-color: #0056b3;
}

.action-buttons {
  width: 90%;
  display: flex;
  justify-content: center;
  margin-top: 180px;
  margin-bottom: 30px;
  gap: 30px;
}

.submit-button {
  background-color: #2aa746;
  color: white;
  padding: 20px 60px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.submit-button:hover {
  background-color: #218838;
}

.cancel-button {
  background-color: #007bff;
  color: white;
  padding: 20px 60px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #0056b3;
}

/* 覆盖背景 */
.alert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 弹窗样式 */
.change-price-box {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
.input-box {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}





/* .ant-select-selection-placeholder{
    font-size: 30px;
}
.ant-select-dropdown .ant-select-item{
    font-size: 20px;
}
.ant-select.ant-select-in-form-item{
    width: 400px;
}
.ant-select-arrow{
    margin-right: 5px;
} */
</style>